<template>
  <el-autocomplete
    class="inline-input"
    v-model="state1"
    :fetch-suggestions="querySearch"
    placeholder="单位名称"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  data () {
    return {
      restaurants: [],
      state1: this.state
    }
  },
  props: {
    state: {
      type: String,
      default: ''
    },
    listData: {
      type: Array,
      default: () => [
        {
          value: '三全鲜食（北新泾店）',
          address: '长宁区新渔路144号',
          asdasd: 'sdasdasdasd'
        },
        {
          value: 'Hot honey 首尔炸鸡（仙霞路）',
          address: '上海市长宁区淞虹路661号'
        },
        {
          value: '新旺角茶餐厅',
          address: '上海市普陀区真北路988号创邑金沙谷6号楼113'
        },
        { value: '泷千家(天山西路店)', address: '天山西路438号' }
      ]
    }
  },
  methods: {
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    loadAll () {
      return [
        {
          value: '三全鲜食（北新泾店）',
          address: '长宁区新渔路144号',
          asdasd: 'sdasdasdasd'
        },
        {
          value: 'Hot honey 首尔炸鸡（仙霞路）',
          address: '上海市长宁区淞虹路661号'
        },
        {
          value: '新旺角茶餐厅',
          address: '上海市普陀区真北路988号创邑金沙谷6号楼113'
        },
        { value: '泷千家(天山西路店)', address: '天山西路438号' }
      ]
    },
    handleSelect (item) {
      //   console.log(item)
      this.$emit('handleSelect', item)
    }
  },
  mounted () {
    // this.restaurants = this.loadAll()
    this.restaurants = this.listData
  }
}
</script>

<style lang="stylus">
.el-autocomplete
  width 100%
</style>
